I am trying to embed country - city json file with PrimeReact. I am having difficulty because of this. I'm pulling the information for the country, but the city shows as [Object, object ].

 <AutoComplete
              placeholder="Search Country"
              dropdown
              value={selectedCountryValue}
              id="dd"
              completeMethod={searchCountry}
              onChange={(e) => setSelectedCountryValue(e.value)}
              suggestions={autoFilteredValue}
              field="name"
              style={{ marginLeft: 10, height: 40, width: 267 }}
            />

 <AutoComplete
              placeholder="Search City"
              dropdown
              value={selectedCountryValue}
              id="dd"
              completeMethod={searchCity(selectedCountryValue)}
              onChange={(e) => setSelectedCountryValue(e.value)}
              suggestions={selectedAutoValueCity}
              field="states"
              style={{ marginLeft: 10, height: 40, width: 267 }}
            />

I used variables. When I select the country, the json other data comes. Console.log also works flawlessly

const searchCity = (event) => {
    setTimeout(() => {
      if (event) {
        console.log("here");
        console.log(event.states.map((obj) => obj.name));
        return event.states.map((obj) => obj.name);
      }
    }, 250);
  };

The Json data sequence is also as shown below.

"data" :[
    {
      "code2": "AF",
      "code3": "AFG",
      "name": "Afghanistan",
      "capital": "Kabul",
      "region": "Asia",
      "subregion": "Southern Asia",
      "states": [
        {
          "code": "BDS",
          "name": "Badakhshān",
          "subdivision": null
        },